<section>

    <div class="help-content">
        <h3 class="info-title smaller" data-id="#pages/login">Login</h3>
        <!-- #section:pages/login -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Login page has a more compact structure and generally needs fewer scripts and stylesheets unless
                    you want to include some extra plugins for some form fields.
                    <br/>
                    For more info about this please see <a href="#basics/layout.login" class="help-more">Login
                    Layout</a>
                </li>
                <li>
                    Basically it consists of three optional widget boxes for login, signup and password sections.
                </li>
                <li>
                    You should add <code>.login-layout</code> class to
                    <body>body</code> element:
<pre data-language="html">
&lt;body class="login-layout"&gt;
or
&lt;body class="login-layout blur-login"&gt;
or
&lt;body class="login-layout light-login"&gt;
</pre>
                </li>

                <li>
                    There are three optional background styles:
                    <ol>
                        <li><code>.login-layout</code> default login background</li>
                        <li><code>.login-layout.blur-login</code> blurred image background</li>
                        <li><code>.login-layout.light-login</code> light login background</li>
                    </ol>
                </li>

                <li>
                    The (optionally) three boxes are inside <code>.login-container</code>:
<pre data-language="html">
<div class="login-container">
    <div class="center">
        <!-- page header and text -->
    </div>
    <div class="space-6"></div>
    <!-- optional space -->
    <div class="pos-rel"><!-- a position relative container -->
        <div class="login-box visible widget-box no-border" id="login-box">
            <!-- login area -->
        </div>

        <div class="forgot-box widget-box no-border" id="forgot-box">
            <!-- forgot area -->
        </div>

        <div class="signup-box widget-box no-border" id="signup-box">
            <!-- signup area -->
        </div>
    </div>
</div>
</pre>
                </li>

                <li>
                    Inside login box, there are the optional social login buttons inside
                    <code>.social-or-login</code> and <code>.social-login</code> container:
<pre data-language="html">
<div class="social-or-login center">
    <span class="bigger-110">Or Login Using</span>
</div>
<div class="space-6"></div>
<div class="social-login center">
    <a class="btn btn-primary"><i class="ace-icon fa fa-facebook"></i></a>
    <a class="btn btn-info"><i class="ace-icon fa fa-twitter"></i></a>
    <a class="btn btn-danger"><i class="ace-icon fa fa-google-plus"></i></a>
</div>
</pre>
                </li>

                <li>
                    The bottom links that are used to move between boxes
                    and are inside <code>.toolbar</code> which have a class only used to color them:
<pre data-language="html">
<div class="toolbar center">
    <a class="back-to-login-link" data-target='#login-box' href="#">
        <i class="ace-icon fa fa-arrow-left"></i>
        Back to login
    </a>
</div>
or
<div class="toolbar clearfix">
    <div>
        <a class="forgot-password-link" data-target="#forgot-box" href="#">
            <i class="ace-icon fa fa-arrow-left"></i>
            I forgot my password
        </a>
    </div>
    <div>
        <a class="user-signup-link" data-target="#signup-box" href="#">
            I want to register
            <i class="ace-icon fa fa-arrow-right"></i>
        </a>
    </div>
</div>
</pre>
                    Each link has a <code>data-target</code> attribute.
                    <br/>


                </li>

                <li>
                    <code>data-target</code> is the selector of target.
                    The following code should also be included in your page for switching between pages:
<pre data-language="javascript">
jQuery(function($) {
 $(document).on('click', '.toolbar a[data-target]', function(e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('.widget-box.visible').removeClass('visible');//hide others
    $(target).addClass('visible');//show target
 })
})
</pre>
                </li>

            </ul>
        </div>
        <!-- /section:pages/login -->
    </div>

</section>